<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello bootstrap</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        .row+.row {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>Hello,BootStrap</h1>
    <div class="row">
        <div class="col-md-6">
            <ul class="nav nav-tabs nav-justified">
                <li role="presentation" class="active"><a href="#home" data-toggle="tab" role="tab">Home</a></li>
                <li role="presentation"><a href="#profile" data-toggle="tab" role="tab">Profile</a></li>
                <li role="presentation"><a href="#action" data-toggle="tab" role="tab">Actions</a></li>
            </ul>
            <!--添加每个导航标签页中的内容-->
            <div class="tab-content">
                <div class="tab-pane fade in active" role="tabpanel" id="home">
                    home页
                    ...
                    <div style="width:50px;">
                        <a href="#" title="这是一个超链接" data-toggle="tooltip" data-placement="right">鼠标放上来试试</a>
                    </div>
                    <div>
                        <button type="button" class="btn btn-danger" data-toggle="popover"
                                data-placement="top" data-trigger="focus"
                                title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">点我弹出/隐藏弹出框</button>
                    </div>

                    <div style="width:50px; white-space: nowrap;">
                        <a href="#" title="这是一个超链接" data-toggle="popover" data-placement="right"
                            title="Popover Title" data-content="今天天气不错呀,今天天气不错呀,今天天气不错呀!">鼠标放上来试试</a>
                    </div>
                </div>
                <div class="tab-pane fade" role="tabpanel" id="profile">
                    profile页
                </div>
                <div class="tab-pane fade" role="tabpanel" id="action">
                    actions页
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <ul class="nav nav-pills nav-justified">
                <li role="presentation" class="active"><a href="#">内容1</a></li>
                <li role="presentation"><a href="#">内容2</a></li>
                <li role="presentation"><a href="#">内容3</a></li>
            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-md-2">
            <ul class="nav nav-pills nav-stacked">
                <li role="presentation" class="active"><a href="#">内容1</a></li>
                <li role="presentation"><a href="#">内容2</a></li>
                <li role="presentation"><a href="#">内容3</a></li>
            </ul>
        </div>

        <div class="col-md-offset-2 col-md-8">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Contact</a></li>
                <li role="presentation" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                        Product
                        <span class="caret"></span>
                    </a>
                    <!-- 添加子菜单 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">子菜单1</a></li>
                        <li><a href="#">子菜单2</a></li>
                        <li><a href="#">子菜单3</a></li>
                    </ul>
                </li>
                <li role="presentation"><a href="#">Service</a></li>
            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <ul class="nav nav-pills nav-justified">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Contact</a></li>
                <li role="presentation" class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">
                        Product
                        <span class="caret"></span>
                    </a>
                    <!-- 添加子菜单 -->
                    <ul class="dropdown-menu">
                        <li><a href="#">子菜单1</a></li>
                        <li><a href="#">子菜单2</a></li>
                        <li><a href="#">子菜单3</a></li>
                    </ul>
                </li>
                <li role="presentation"><a href="#">Service</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 导入js文件 -->
<script type="text/javascript" src="component/jquery/jquery.min.js"></script>
<script type="text/javascript" src="component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script type="text/javascript">
    //bootstrap从性能的角度考虑，没有把 tooltip和popover等组件自动加载执行，而是由用户自行决定是否启用这个功能。
    //启用的代码如下：
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
        $('[data-toggle="popover"]').popover();
    })
</script>
</body>
</html>